<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>无聊说点啥</title>
    <link rel="stylesheet" href="/layui-v2.9.6/layui/css/layui.css">
    <style>
        .demo-tab-header .layui-btn.layui-this{border-color: #1E9FFF; color: #1E9FFF;}
        .demo-tab-body>div{display: none;}
    </style>
</head>
<body style="background-color: #fafafa">
<div class="layui-container" >
    <div class="layui-row">
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md10">
            <ul class="layui-nav layui-bg-gray">
                <li class="layui-nav-item"><a href=""><img src="/images/LOGO.png" style="width:68px;height:60px;"/></a></li>
                <li class="layui-nav-item" style="background-color: #16b777"><a href="">首页</a></li>
                <li class="layui-nav-item"><a href="">我的家乡</a></li>
                <li class="layui-nav-item"><a href="">同城信息</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">更多</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">选项1</a></dd>
                        <dd><a href="">选项2</a></dd>
                        <dd><a href="">选项3</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">菜单3</a></li>
                <li class="layui-nav-item" style="float:right">
                    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a href="javascript:;">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div><img src="/images/1.png"/></div>
            <div><img src="/images/2.png"/></div>
            <div><img src="/images/3.png"></div>
            <div><img src="/images/4.png"></div>
        </div>
    </div>
</div>
<div class="layui-row" style="padding-top:10px;"></div>
<div class="layui-row">
    <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <img style="width:300px;height:200px;" src="/images/1.png">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <img style="width:300px;height:200px;" src="/images/2.png">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <img style="width:300px;height:200px;" src="/images/3.png">
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header">卡片面板</div>
                    <div class="layui-card-body">
                        <img style="width:300px;height:200px;" src="/images/4.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-md1">&nbsp;</div>
    <div class="layui-col-md10">
        <div class="layui-col-md9">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <img style="width:220px;height:150px;" src="/images/1.png">
                </div>
                <div class="layui-col-md9">
                    <div class="layui-row" style="margin:5px 15px 0px 10px;min-height:120px;">
                        感觉23年所有的旅行博主都去爪哇爬火山了1，怎么能少了我们。原本的计划从 新西兰 出发，到马来 仙本那 潜个水，然后飞澳洲。想想人都到这儿了，
                        为什么不顺路去个落地签的印尼呢？又想想都到印尼了，为什么不顺路去个 科莫多 呢？于是我们 诗巴丹 潜水行就变成了一个月的马来、印尼上山下海行，主打一个顺路。</div>
                    <div class="layui-row" style="padding:5px 20px 0px 10px;">
                        <i class="layui-icon layui-icon-location" style="font-size: 15px; color: #1E9FFF;">浙江</i>
                        <i class="layui-icon layui-icon-date" style="font-size: 15px; color: #1E9FFF;">2023-01-01</i>
                        <i class="layui-icon layui-icon-praise" style="float:right;font-size: 15px; color: #1E9FFF;">1</i>
                    </div>
                </div>
            </div>
            <hr>
            <div id="demo-laypage-theme-1" style="text-align: center"></div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-row">
                <h3>最新咨询</h3>
            </div>
            <div>
                1、赤色分割线
                <hr class="layui-border-red">
                2、橙色分割线
                <hr class="layui-border-orange">
                3、墨绿分割线
                <hr class="layui-border-green">
                4、青色分割线
                <hr class="layui-border-cyan">
                5、蓝色分割线
                <hr class="layui-border-blue">
                6、深色分割线
                <hr class="layui-border-black">
            </div>
        </div>
    </div>
    <div class="layui-col-md1">&nbsp;</div>

</div>
<!-- body 末尾处引入 layui -->
<script src="/layui-v2.9.6/layui/layui.js"></script>
<script>
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            // 在此处使用经度和纬度进行其他操作
            console.log("获取位置失败: " + latitude);
        }, function(error) {
            // 处理获取位置失败的情况
            console.log("获取位置失败: " + error.message);
        });
    } else {
        console.log("浏览器不支持地理定位");
    }

   function changeListDay(type){
       alert(type)
   }
    layui.use(function() {
        var carousel = layui.carousel;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var util = layui.util;
        var element = layui.element;

        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });

        util.on('lay-on', {

        });

        // 欢迎信息
        // layer.msg('Hello World', {icon: 6});

        // 输出版本号
        lay('#version').html(layui.v);

        laypage.render({
            elem: 'demo-laypage-theme-1',
            count: 100,
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            theme: '#1E9FFF'
        });
        // 日期
        laydate.render({
            elem: '#test2',
            value: new Date(),
            isInitValue: true
        });
        // 绑定自定义的 tab 元素
        element.tab({
            headerElem: '#tabHeader>.layui-btn',
            bodyElem: '#tabBody>div'
        });
        // tab 切换事件
        element.on('tab(test-handle)', function(data){
            console.log(this); // 当前 tab 标题所在的原始 DOM 元素
            console.log(data.index); // 得到当前 tab 项的所在下标
            console.log(data.elem); // 得到当前的 tab 容器
        });
        var carousel = layui.carousel;
        // 渲染 - 常规轮播
        carousel.render({
            elem: '#ID-carousel-demo-1',
            width: '100%',
            height: '60px;',
            arrow: 'always',
            autoplay: 'false',
            indicator: 'none'
        });

        // 自定义固定条
        // util.fixbar({
        //     bars: [{
        //         type: '发布',
        //         title: '发布',
        //         icon: 'layui-icon-release',
        //         style: 'background-color: #FF5722;'
        //     }],
        //     on: { // 任意事件 --  v2.8.0 新增
        //         mouseenter: function(type){
        //             layer.tips(type, this, {
        //                 tips: 4,
        //                 fixed: true
        //             });
        //         },
        //         mouseleave: function(type){
        //             layer.closeAll('tips');
        //         }
        //     },
        //     // 点击事件
        //     click: function(type){
        //         console.log(this, type);
        //         if(type=='发布'){
        //             var index = layer.open({
        //                 type: 2,
        //                 title: '开始说说',
        //                 shadeClose: true,
        //                 maxmin: true, //开启最大化最小化按钮
        //                 area: ['100%', '600px'],
        //                 content: '/home/release'
        //             });
        //             // 设置弹层最大化
        //             layer.full(index);
        //         }
        //     }
        // });
    });
</script>
</body>
</html>
